<template>
  <div class="followeds">
    <el-row v-if="list.length === 0" type="flex" justify="center">
      <img
        src="../../../../assets/images/loading.3708220b.gif"
        alt=""
        height="200"
        width="200"
      />
    </el-row>
    <div v-else>
      <div class="content">
        <div class="content_item" v-for="(item, index) in list" :key="index">
          <GlobalImageDeep
            :imgWidth="140"
            :imgHeight="140"
            :url="item.avatarUrl"
          />
          <p>{{ item.nickname }}</p>
          <span>{{ getCount(item.followeds) }}&nbsp;人关注</span>
          <el-button @click.native="followsOrFollowedsMethod(item)">
            <div v-if="item.followed">互相关注</div>
            <div v-else>
              <i
                class="el-icon-plus"
                style="margin-right: 6px; font-size: 16px"
              ></i
              >回关
            </div>
          </el-button>
        </div>
      </div>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="20"
          @current-change="paginationCurrentChange"
          :current-page="currentPage"
          :hide-on-single-page="false"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { getUserFollowedsData } from "../../../../api/myMusicApi";
import { getCount } from "../../../../utils/format";
export default {
  name: "followeds",
  components: {},
  props: {
    total: {
      type: Number,
      required: true,
      default: 0,
    },
  },
  data() {
    return {
      queryInfo: {
        uid: "",
        limit: 20,
        offset: 0,
      },
      list: [],
      currentPage: 1,
    };
  },
  created() {
    setTimeout(() => {
      this.getUserFollowedsDataMethod();
    }, 1000);
  },
  methods: {
    getCount,
    async getUserFollowedsDataMethod() {
      this.queryInfo.uid = this.userStoreProfile.userId;
      let result = await getUserFollowedsData(this.queryInfo);
      if (result.code === 200) {
        this.list = result.followeds;
      }
    },
    test() {
      console.log("测试");
    },
    followsOrFollowedsMethod(item) {
      // _.throttle(this.getUserFollowsDataMethod, 10, {
      //   leading: true,
      //   trailing: false,
      // });
      _.debounce(this.getUserFollowsDataMethod, 2000, { trailing: true });
      let queryInfo = { id: item.userId, t: item._status };

      console.log("执行完毕");
    },
    paginationCurrentChange(newPage) {
      this.currentPage = newPage;
      this.queryInfo.offset = (newPage - 1) * this.queryInfo.limit;
      this.getUserFollowedsDataMethod();
      console.log(newPage);
    },
  },
  computed: {
    ...mapState({
      userStoreProfile: (state) => state.userStore.profile,
      userStoreCookie: (state) => state.userStore.cookie,
      userStoreToken: (state) => state.userStore.token,
      userStoreUserDetail: (state) => state.userStore.userDetail,
    }),
  },
};
</script>

<style lang="less" scoped>
.followeds {
  /deep/ .el-pager li.active {
    color: #fff;
    background: @globalColor;
    border-radius: 50%;
    &:hover {
      color: #fff;
    }
  }
  /deep/ .el-pager li:hover {
    color: @globalColor;
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    .content_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 224px;
      height: 307px;
      background-color: #fbfbfd;
      margin-right: 20px;
      padding: 25px 0;
      margin-bottom: 15px;
      &:nth-child(5n) {
        margin-right: 0;
      }
      /deep/ .el-image img {
        border-radius: 50%;
      }
      p {
        font-size: 16px;
        margin-top: 15px;
        cursor: pointer;
        &:hover {
          color: @globalColor;
        }
      }
      span {
        color: #999999;
        margin: 10px 0;
      }
    }
  }
}
</style>
